<template>
  <div class="select-filter-wrapper">
    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="请输入检索关键字，可不填" />
      </el-col>
      <el-col :span="4"
        ><el-button type="primary" @click="handleSearch"
          >搜索</el-button
        ></el-col
      >
    </el-row> -->
    <el-row :gutter="20" class="search-row">
      <el-col :span="1" align="center">
        <span class="search-title">筛选</span>
      </el-col>
      <el-col :span="23">
        <div class="search-item-box">
          <div class="item">
            <el-dropdown @command="handleProvinceCommand">
              <span class="el-dropdown-link">
                省
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-scrollbar height="300px">
                    <el-dropdown-item v-for="(item, index) in provinces" :command="item" :key="index">
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-scrollbar>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-dropdown @command="handleCityCommand">
              <span class="el-dropdown-link">
                城市
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-scrollbar height="300px">
                    <el-dropdown-item v-for="(item, index) in citys" :command="item" :key="index">
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-scrollbar>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <!-- <div class="item">
            <el-dropdown @command="handleAreaCommand">
              <span class="el-dropdown-link">
                区域
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-scrollbar height="300px">
                    <el-dropdown-item v-for="item in areas" :command="item">{{
                      item.label
                    }}</el-dropdown-item></el-scrollbar
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div> -->
          <div class="item">
            <el-divider direction="vertical" />
          </div>
          <div class="item">
            <el-dropdown @command="handleGenderCommand">
              <span class="el-dropdown-link">
                性别
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, index) in genderType" :command="item" :key="index">
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-dropdown @command="handleAgeCommand">
              <span class="el-dropdown-link">
                年龄
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, index) in workAge" :command="item" :key="index">
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-dropdown @command="handleDegreeCommand">
              <span class="el-dropdown-link">
                学历
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, index) in degrees" :command="item" :key="index">
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-dropdown @command="handleWorkyearCommand">
              <span class="el-dropdown-link">
                工作经验
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, index) in workYears" :command="item" :key="index">
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-divider direction="vertical" />
          </div>
          <div class="item">
            <el-dropdown @command="handleStagsCommand">
              <span class="el-dropdown-link">
                技能标签
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-scrollbar height="300px">
                    <el-dropdown-item v-for="(item, index) in dialogData.stags" :command="item" :key="index">
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-scrollbar>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-dropdown @command="handleFtagsCommand">
              <span class="el-dropdown-link">
                职能标签
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-scrollbar height="300px">
                    <el-dropdown-item v-for="(item, index) in dialogData.ftags" :command="item" :key="index">
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-scrollbar>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="item">
            <el-divider direction="vertical" />
          </div>
          <!-- <div class="item">
            <el-dropdown>
              <span class="el-dropdown-link">
                期望薪资
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <div class="expsalary-wrapper">
                    <el-input-number
                      v-model="dialogData.salaryStart"
                      :min="100"
                      :max="10000"
                      :step="500"
                      @change="handleExpsalaryStart"
                    />
                    <span>-</span>
                    <el-input-number
                      v-model="dialogData.salaryEnd"
                      :min="100"
                      :max="50000"
                      :step="500"
                      @change="handleExpsalaryEnd"
                    />
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="search-row">
      <el-col :span="1" align="center">
        <span class="search-title">已选</span>
      </el-col>
      <el-col :span="23">
        <el-tag v-for="(item, index) in dialogData.items" :key="index" class="ml-1" closable @close="handleCloseTag(index)">
          {{ item.label }}
        </el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="opt-row">
      <el-col :span="23" :offset="1">
        <el-button type="primary" @click="handleSearch" :icon="Search" size="small">搜索</el-button>
        <el-button type="primary" @click="handleRefresh" :icon="Refresh" text size="small">清除</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { SearchWorkerOption } from "@/biz/interface/workType";
import { onBeforeMount, reactive } from "vue";
import { genderType } from "@/biz/datas/sysData";
import { workAge, workYears, degrees } from "@/biz/datas/formDrops";
import { getCityTreeApi } from "@/api/modules/common/address";
import { useAddress } from "@/biz/hooks/useAddress";
import { getWorkSkillTagsDropApi } from "@/api/modules/syswk/sktag";
import { getWorkFunctionTagsDropApi } from "@/api/modules/syswk/fntag";
import { Search, Refresh } from "@element-plus/icons-vue";
const { provinces, citys, province_id, city_id } = useAddress();
//页面的数据
interface FilterOption {
  citys?: any[];
  // 技能
  stags?: any[];
  // 职能
  ftags?: any[];
  items: { label: string; value: string; key: string }[];
  //当前的数据对象
  itemInfo: SearchWorkerOption;
  salaryStart: number;
  salaryEnd: number;
}
//当前表单数据在这里初始化
const dialogData = reactive<FilterOption>({
  items: [],
  itemInfo: {},
  salaryStart: 2000,
  salaryEnd: 6000
});

const handleProvinceCommand = (command: { label: string; value: string }) => {
  province_id.value = command.value;
  checkSelect(1, "provinceId");
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "provinceId"
  });
};

const handleCityCommand = (command: { label: string; value: string }) => {
  city_id.value = command.value;
  checkSelect(1, "cityId");
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "cityId"
  });
};

// const handleAreaCommand = (command: { label: string; value: string }) => {
//   area_id.value = command.value;
//   checkSelect(1, "areaId");

//   dialogData.items.push({
//     label: command.label,
//     value: command.value,
//     key: "areaId"
//   });
// };

const handleGenderCommand = (command: { label: string; value: string }) => {
  checkSelect(1, "gender");
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "gender"
  });
};

const handleAgeCommand = (command: { label: string; value: string }) => {
  checkSelect(1, "ageId");
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "ageId"
  });
};

const handleDegreeCommand = (command: { label: string; value: string }) => {
  checkSelect(1, "degreeId");
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "degreeId"
  });
};

const handleWorkyearCommand = (command: { label: string; value: string }) => {
  checkSelect(1, "workYearId");
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "workYearId"
  });
};

const handleStagsCommand = (command: { label: string; value: string }) => {
  checkSelect(2, "stags", command.value);
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "stags"
  });
};

const handleFtagsCommand = (command: { label: string; value: string }) => {
  checkSelect(2, "ftags", command.value);
  dialogData.items.push({
    label: command.label,
    value: command.value,
    key: "ftags"
  });
};

//处理已选择的， type=1， 表示这个key，只能选择一次， type=2，表示 key, value 只能选择一次。
const checkSelect = (type: number, key: string, value?: string) => {
  let idx = -1;
  if (type === 1) {
    idx = dialogData.items.findIndex(item => {
      return item.key == key;
    });
  } else if (type === 2) {
    idx = dialogData.items.findIndex(item => {
      return item.key == key && item.value == value;
    });
  }
  if (idx > -1) {
    dialogData.items.splice(idx, 1);
  }
};

const handleCloseTag = (index: number) => {
  // console.log("关闭tag", item);
  dialogData.items.splice(index, 1);
};

// const handleExpsalaryStart = () => {
//   // console.log("salaryStart", dialogData.salaryStart);

//   checkSelect(1, "salaryStart");
//   dialogData.items.push({
//     label: dialogData.salaryStart + "",
//     value: dialogData.salaryStart + "",
//     key: "salaryStart"
//   });
// };

// const handleExpsalaryEnd = () => {
//   // console.log("salaryEnd", dialogData.salaryEnd);

//   checkSelect(1, "salaryEnd");
//   dialogData.items.push({
//     label: dialogData.salaryEnd + "",
//     value: dialogData.salaryEnd + "",
//     key: "salaryEnd"
//   });
// };

// 查找事件
const handleSearch = () => {
  // console.log(dialogData.items);
  emit("change", dialogData.items);
};

const handleRefresh = () => {
  dialogData.items = [];
};

onBeforeMount(() => {
  getCityTreeApi({}).then(res => {
    // console.log(res);
    if (res) {
      dialogData.citys = res.data;
    }
  });
  // 技能标签
  getWorkSkillTagsDropApi({}).then(res => {
    if (res) {
      dialogData.stags = res.data;
    }
  });

  //职能标签
  getWorkFunctionTagsDropApi({}).then(res => {
    if (res) {
      dialogData.ftags = res.data;
    }
  });
});

interface FilterEmits {
  (e: "change", value: { label: string; value: string; key: string }[]): void;
}
const emit = defineEmits<FilterEmits>();
</script>

<style scoped lang="scss">
.select-filter-wrapper {
  width: 100%;
  height: 100%;

  .search-row {
    height: 33px;
    line-height: 33px;

    .search-title {
      font-size: 0.8em;
      font-weight: 600;
    }

    .search-item-box {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .item {
        margin-left: 2em;
        display: flex;
        align-items: center;
      }
    }
  }

  .opt-row {
    height: 33px;
    line-height: 33px;
    padding-left: 1em;
  }
}

.ml-1 {
  margin-left: 1em;
}
</style>
